<template>
	<view class="video-content">
		<view v-show="cameraUrl" class="preview" id="video-container"></view>
		<view v-show="!cameraUrl" class="mt-20">
			暂无摄像头，等待入栏
		</view>
	</view>
</template>



<script module="ezuikit" lang="renderjs">
	import {ref} from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import {getSharePig} from '@/apis'
	
	var player = null;
	let cameraUrl = null
	const code = null

	export default {
		
		async mounted() {
		 	await this.getData()

			if (typeof window.EZUIKit !== 'undefined' && cameraUrl) {
				
				this.initPlayer();
				
			} else {						
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/ezuikit.js'
				script.onload = this.initPlayer.bind(this)
				document.head.appendChild(script)
			}
		},

		methods: {
			async getData(){
				// let options = uni.getLaunchOptionsSync();
				// const code = options?.query.code
				const code = this.$route.query.code
				const {data} = await getSharePig(code)
				console.log(code,data.pig?.cameraUrl[0],'发电机房考虑到荆防颗粒的')
				cameraUrl = data.pig?.cameraUrl[0] ? JSON.parse(data.pig.cameraUrl[0]) : null
			},
			initPlayer() {
				// const { windowWidth, windowHeight } = uni.getSystemInfoSync();
						
				        var accessToken = cameraUrl.accessToken;
				        player = new EZUIKit.EZUIKitPlayer({
				          id: 'video-container', // 视频容器ID
				          accessToken: accessToken,
				          url: cameraUrl.url,
				          // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
				          //template: 'simple',
				          plugin: [''], // 加载插件，talk-对讲
				          width: 350,
				          height: 200,
				        });
				        window.player = player;
			},
			play() {
				var playPromise = player.play();
				playPromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			destroy() {
				var destroyPromise = player.destroy();
				destroyPromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			}
		}
	}
</script>

<style>
	.video-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}

	.preview {
		background-color: black;
		/* margin-top: -50rpx; */
		width: 578rpx;
		height:330rpx;
	}
</style>
